<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Folio</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
    <link rel="manifest" href="img/site.webmanifest">
    <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="description" content="Production-ready Portfolio and Case Study Template for Visual Designers">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@ui8">
    <meta name="twitter:title" content="Folio Designer">
    <meta name="twitter:description" content="Production-ready Portfolio and Case Study Template for Visual Designers">
    <meta name="twitter:creator" content="@ui8">
    <meta name="twitter:image" content="https://ui8-folio.herokuapp.com/img/twitter-card.jpg">
    <meta property="og:title" content="Folio Designer">
    <meta property="og:type" content="Article">
    <meta property="og:url" content="https://ui8.net/ui8/products/folio-designer">
    <meta property="og:image" content="https://ui8-folio.herokuapp.com/img/fb-og-image.jpg">
    <meta property="og:description" content="Production-ready Portfolio and Case Study Template for Visual Designers">
    <meta property="og:site_name" content="Folio Designer">
    <meta property="fb:admins" content="132951670226590">
    <link rel="stylesheet" media="all" href="css/app.css">
    <script>var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
  if (screen.width < 375) {
    var newScale = screen.width / 375;
    viewportmeta.content = 'width=375, minimum-scale=' + newScale + ', maximum-scale=1.0, user-scalable=no, initial-scale=' + newScale + '';
  } else {
    viewportmeta.content = 'width=device-width, maximum-scale=1.0, initial-scale=1.0';
  }
}</script>
  </head>
  <body>
    <div class="page">
      <div class="main">
        <div class="header js-header" id="header">
          <div class="header__center center"><a class="header__logo" href="index.html"><img class="header__pic" src="img/logo.svg" alt="" /></a>
            <div class="header__social header__social_main"><a class="header__link" href="#"><svg class="icon icon-dribbble">
                  <use xlink:href="img/sprite.svg#icon-dribbble"></use>
                </svg>Dribbble</a><a class="header__link" href="#"><svg class="icon icon-instagram">
                  <use xlink:href="img/sprite.svg#icon-instagram"></use>
                </svg>Instagram</a></div><button class="header__burger js-header-burger"></button>
          </div>
          <div class="header__wrapper js-header-wrapper">
            <div class="header__preview"><a class="header__logo" href="index.html"><img class="header__pic" src="img/logo-white.svg" alt="" /></a>
              <div class="header__img"><img class="header__pic" src="img/bg-header.png" alt="" /></div>
            </div>
            <div class="header__center center">
              <div class="header__contacts"><a class="header__line" href="mailto:hello@ui8.net">
                  <div class="header__icon"><svg class="icon icon-email">
                      <use xlink:href="img/sprite.svg#icon-email"></use>
                    </svg></div>
                  <div class="header__text">hello@ui8.net</div>
                </a>
                <div class="header__line">
                  <div class="header__icon"><svg class="icon icon-place">
                      <use xlink:href="img/sprite.svg#icon-place"></use>
                    </svg></div>
                  <div class="header__text">
                    <p>4074 Ebert Summit Suite 375</p>
                    <p>Lake Leonardchester</p>
                  </div>
                </div><a class="header__line" href="tel:+441236547890">
                  <div class="header__icon"><svg class="icon icon-phone">
                      <use xlink:href="img/sprite.svg#icon-phone"></use>
                    </svg></div>
                  <div class="header__text">+44 123 654 7890 </div>
                </a>
              </div>
              <nav class="header__nav"><a class="header__item" href="#"><span>About</span></a><a class="header__item" href="#"><span>Work</span></a><a class="header__item" href="#"><span>Services</span></a><a class="header__item" href="#"><span>Contact</span></a></nav>
              <div class="header__social header__social_inner"><a class="header__link" href="#"><svg class="icon icon-dribbble">
                    <use xlink:href="img/sprite.svg#icon-dribbble"></use>
                  </svg>Dribbble</a><a class="header__link" href="#"><svg class="icon icon-instagram">
                    <use xlink:href="img/sprite.svg#icon-instagram"></use>
                  </svg>Instagram</a></div>
            </div>
          </div>
        </div>
        <div class="main__bg"><img class="main__pic" src="img/bg-main.jpg" alt=""></div>
        <div class="main__center center">
          <div class="main__wrap">
            <div class="main__stage stage" data-aos="transform">Jack Gross</div>
            <h1 class="main__title title h1"><span data-aos="transform" data-aos-delay="150">Hello, my</span><span data-aos="transform" data-aos-delay="300">name's Jack.</span><span data-aos="transform" data-aos-delay="450">I'm a Visual</span><span data-aos="transform" data-aos-delay="600">Designer.</span></h1><a class="scroll js-scroll" href="#details" data-aos="transform">
              <div class="scroll__icon"><img class="scroll__pic" src="img/scroll.svg" alt=""></div>
              <div class="scroll__text">Scroll down</div>
            </a>
          </div>
        </div>
        <div class="main__view" data-aos>
          <div class="main__preview"><img class="main__pic" src="img/main-pic-6.png" alt=""></div>
          <div class="main__preview"><img class="main__pic js-parallax" data-scale="2.5" data-orientation="up" src="img/main-pic-1.png" alt=""></div>
          <div class="main__preview"><img class="main__pic js-parallax" data-scale="1.5" data-orientation="up" src="img/main-pic-2.png" alt=""></div>
          <div class="main__preview"><img class="main__pic" src="img/main-pic-3.png" alt=""></div>
          <div class="main__preview"><img class="main__pic" src="img/main-pic-4.png" alt=""></div>
          <div class="main__preview"><img class="main__pic js-parallax" data-scale="4.5" data-orientation="up" src="img/main-pic-5.png" alt=""></div>
          <div class="main__preview"><img class="main__pic js-parallax" data-scale="1.5" data-orientation="down" src="img/main-pic-7.png" alt=""></div>
        </div>
        <div class="main__figures">
          <div class="main__figure" data-aos="animation-translate-y"><img class="main__pic js-parallax" data-scale="2.2" data-orientation="down" src="img/figure-1.png" alt=""></div>
          <div class="main__figure" data-aos="animation-translate-y" data-aos-delay="200"><img class="main__pic js-parallax" data-scale="2.2" data-orientation="up" src="img/figure-2.png" alt=""></div>
          <div class="main__figure" data-aos="animation-translate-y" data-aos-delay="400"><img class="main__pic" src="img/figure-3.png" alt=""></div>
        </div>
      </div>
      <div class="details" id="details">
        <div class="details__center center">
          <div class="details__head" data-aos="animation-scale-y">
            <div class="details__stage stage">What I Do</div>
            <h3 class="details__info h3">I enjoy creating delightful, <br>human-centered digital experiences.</h3>
          </div>
          <h2 class="details__title" data-aos="animation-scale-y">Think. Make. <br>Solve. </h2>
          <div class="details__btn" data-aos="animation-translate-y"><button class="btn btn_purple"><span class="btn__text">Contact Me</span><svg class="icon icon-arrow-right">
                <use xlink:href="img/sprite.svg#icon-arrow-right"></use>
              </svg></button></div>
          <div class="details__container">
            <div class="details__slider owl-carousel js-slider-details">
              <div class="details__item">
                <div class="details__preview details__preview_cursor" data-aos="animation-scale">
                  <div class="details__img"><img class="details__pic" src="img/cursor.png" alt=""></div>
                </div>
                <h5 class="details__category h5" data-aos="animation-scale-y">User Interface</h5>
                <div class="details__text" data-aos="animation-scale-y">We have got quite a few already made templates for better project management that you can use now.</div>
                <div class="details__btn" data-aos="animation-scale-y"><button class="btn btn_dark">Find out more </button></div>
              </div>
              <div class="details__item">
                <div class="details__preview details__preview_hand" data-aos="animation-scale" data-aos-delay="150">
                  <div class="details__img"><img class="details__pic" src="img/hand.png" alt=""></div>
                </div>
                <h5 class="details__category h5" data-aos="animation-scale-y" data-aos-delay="150">User Experience</h5>
                <div class="details__text" data-aos="animation-scale-y" data-aos-delay="150">We have got quite a few already made templates for better project management that you can use now.</div>
                <div class="details__btn" data-aos="animation-scale-y" data-aos-delay="150"><button class="btn btn_dark">Find out more </button></div>
              </div>
              <div class="details__item">
                <div class="details__preview details__preview_color" data-aos="animation-scale" data-aos-delay="300">
                  <div class="details__img"><img class="details__pic" src="img/color-picker.png" alt=""></div>
                </div>
                <h5 class="details__category h5" data-aos="animation-scale-y" data-aos-delay="300">UI Design Kit</h5>
                <div class="details__text" data-aos="animation-scale-y" data-aos-delay="300">We have got quite a few already made templates for better project management that you can use now.</div>
                <div class="details__btn" data-aos="animation-scale-y" data-aos-delay="300"><button class="btn btn_dark">Find out more </button></div>
              </div>
              <div class="details__item">
                <div class="details__preview details__preview_cursor">
                  <div class="details__img"><img class="details__pic" src="img/cursor.png" alt=""></div>
                </div>
                <h5 class="details__category h5">User Interface</h5>
                <div class="details__text">We have got quite a few already made templates for better project management that you can use now.</div><button class="details__btn btn btn_dark">Find out more </button>
              </div>
              <div class="details__item">
                <div class="details__preview details__preview_hand">
                  <div class="details__img"><img class="details__pic" src="img/hand.png" alt=""></div>
                </div>
                <h5 class="details__category h5">User Experience</h5>
                <div class="details__text">We have got quite a few already made templates for better project management that you can use now.</div><button class="details__btn btn btn_dark">Find out more</button>
              </div>
              <div class="details__item">
                <div class="details__preview details__preview_color">
                  <div class="details__img"><img class="details__pic" src="img/color-picker.png" alt=""></div>
                </div>
                <h5 class="details__category h5">UI Design Kit</h5>
                <div class="details__text">We have got quite a few already made templates for better project management that you can use now.</div><button class="details__btn btn btn_dark">Find out more</button>
              </div>
            </div>
          </div>
        </div>
        <div class="details__figures">
          <div class="details__figure"><img class="details__pic js-parallax" data-scale="2" data-orientation="down" src="img/figure-1.png" alt=""></div>
          <div class="details__figure"><img class="details__pic js-parallax" data-scale="2" data-orientation="up" src="img/figure-2.png" alt=""></div>
          <div class="details__figure"><img class="details__pic js-parallax" data-scale="1.2" data-orientation="up" src="img/figure-3.png" alt=""></div>
        </div><a class="details__contact" href="#">Contact me</a>
      </div>
      <div class="work">
        <div class="work__circles"></div>
        <div class="work__center center">
          <div class="work__wrap">
            <div class="work__stage stage stage_pink" data-aos="animation-scale-y">Who I Work With</div>
            <h2 class="work__title title h1" data-aos="animation-scale-y" data-aos-delay="150">Art Direction for Global Leading Brands.</h2>
            <div class="work__text" data-aos="animation-scale-y" data-aos-delay="300">I research and create breakthrough - delightful ideas, leading visual designers.</div><a class="scroll js-scroll" data-aos="animation-scale-y" href="#cases">
              <div class="scroll__icon"><img class="scroll__pic" src="img/scroll.svg" alt=""></div>
              <div class="scroll__text">Scroll down</div>
            </a>
          </div>
        </div>
        <div class="work__preview"><img class="work__pic js-parallax" data-scale="2" data-orientation="down" src="img/work-cube.png" alt=""></div>
        <div class="work__figures" data-aos>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.3" data-orientation="up" src="img/work-cube-1.png" alt=""></div>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.5" data-orientation="up left" src="img/work-cube-2.png" alt=""></div>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.3" data-orientation="up right" src="img/work-cube-3.png" alt=""></div>
          <div class="work__figure"><img class="work__pic" src="img/work-cube-4.png" alt=""></div>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.1" data-orientation="left" src="img/work-cube-5.png" alt=""></div>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.2" data-orientation="right" src="img/work-cube-6.png" alt=""></div>
          <div class="work__figure"><img class="work__pic js-parallax" data-scale="1.2" data-orientation="down" src="img/work-cube-7.png" alt=""></div>
        </div>
      </div>
      <div class="wrapper wrapper_gradient">
        <div class="cases cases_main" id="cases">
          <div class="cases__center center">
            <div class="cases__stage stage" data-aos="animation-scale-y">Portfolio</div>
            <h2 class="cases__title h1" data-aos="animation-scale-y" data-aos-delay="150">Look at My <br>Products.</h2>
            <div class="cases__nav" data-aos="animation-scale-y" data-aos-delay="300"><a class="cases__link active" href="#">Website</a><a class="cases__link" href="#">Illustration</a><a class="cases__link" href="#">Mobile</a></div>
            <div class="cases__list js-owl" data-items-mobile-portrait="1" data-items-mobile-album="1" data-autoheight><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-1.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="200" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-2.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-3.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="200" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-4.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-5.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a><a class="cases__item" data-aos="animation-translate-y" data-aos-delay="200" href="case.html">
                <div class="cases__preview"><img class="cases__pic" src="img/cases-pic-6.jpg" alt="">
                  <div class="cases__box">Case <br>Study</div>
                </div>
                <div class="cases__body">
                  <h4 class="cases__info h4">Collab Landing Page</h4>
                  <div class="cases__text">UI Kit, Coded Template</div>
                </div>
              </a></div>
          </div>
          <div class="cases__figures">
            <div class="cases__figure"><img class="cases__pic js-parallax" data-scale="2" data-orientation="down" src="img/figure-2.png" alt=""></div>
            <div class="cases__figure"><img class="cases__pic js-parallax" data-scale="1.8" data-orientation="down" src="img/figure-3.png" alt=""></div>
          </div>
        </div>
        <div class="review">
          <div class="review__center center">
            <div class="review__stage stage" data-aos="animation-scale-y">What People Say</div>
            <h2 class="review__title title h1" data-aos="animation-scale-y" data-aos-delay="200">Trusted by <br>Clients.</h2>
            <div class="review__container" data-aos="animation-translate-y" data-aos-delay="400">
              <div class="review__slider owl-carousel js-slider-review">
                <div class="review__item">
                  <div class="review__text">“ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.”</div>
                  <div class="review__author">
                    <div class="review__ava"><img class="review__pic" src="img/ava-1.jpg" alt=""></div>
                    <div class="review__details">
                      <div class="review__man h5">Dash</div>
                      <div class="review__company">UI8</div>
                    </div>
                  </div>
                </div>
                <div class="review__item">
                  <div class="review__text">“ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.”</div>
                  <div class="review__author">
                    <div class="review__ava"><img class="review__pic" src="img/ava-1.jpg" alt=""></div>
                    <div class="review__details">
                      <div class="review__man h5">Dash</div>
                      <div class="review__company">UI8</div>
                    </div>
                  </div>
                </div>
                <div class="review__item">
                  <div class="review__text">“ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.”</div>
                  <div class="review__author">
                    <div class="review__ava"><img class="review__pic" src="img/ava-1.jpg" alt=""></div>
                    <div class="review__details">
                      <div class="review__man h5">Dash</div>
                      <div class="review__company">UI8</div>
                    </div>
                  </div>
                </div>
                <div class="review__item">
                  <div class="review__text">“ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.”</div>
                  <div class="review__author">
                    <div class="review__ava"><img class="review__pic" src="img/ava-1.jpg" alt=""></div>
                    <div class="review__details">
                      <div class="review__man h5">Dash</div>
                      <div class="review__company">UI8</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="review__bg">
            <div class="review__preview"><img class="review__pic js-parallax" data-scale="1.5" data-orientation="down" src="img/review-cube.png" alt=""></div>
            <div class="review__preview"><img class="review__pic" src="img/review-cube.png" alt=""></div>
          </div>
        </div>
        <div class="wrapper wrapper_dark">
          <div class="contacts">
            <div class="contacts__center center">
              <div class="contacts__container">
                <div class="contacts__wrap">
                  <div class="contacts__stage stage" data-aos="animation-scale-y">Say hello 👋</div>
                  <h2 class="contacts__title h1" data-aos="animation-scale-y" data-aos-delay="200">Let’s Work <br>Together.</h2>
                  <div class="contacts__info" data-aos="animation-scale-y" data-aos-delay="400">I’d love to meet up with you to discuss your venture, and potential collaborations.</div>
                </div>
                <div class="contacts__row">
                  <div class="contacts__details" data-aos="animation-translate-y"><a class="contacts__line" href="mailto:hello@ui8.net">
                      <div class="contacts__icon"><svg class="icon icon-email">
                          <use xlink:href="img/sprite.svg#icon-email"></use>
                        </svg></div>
                      <div class="contacts__text">hello@ui8.net</div>
                    </a>
                    <div class="contacts__line">
                      <div class="contacts__icon"><svg class="icon icon-place">
                          <use xlink:href="img/sprite.svg#icon-place"></use>
                        </svg></div>
                      <div class="contacts__text">
                        <p>4074 Ebert Summit Suite 375</p>
                        <p>Lake Leonardchester</p>
                      </div>
                    </div><a class="contacts__line" href="tel:+441236547890">
                      <div class="contacts__icon"><svg class="icon icon-phone">
                          <use xlink:href="img/sprite.svg#icon-phone"></use>
                        </svg></div>
                      <div class="contacts__text">+44 123 654 7890</div>
                    </a>
                  </div>
                  <form class="contacts__form" data-aos="animation-translate-y" data-aos-delay="200">
                    <div class="contacts__field field">
                      <div class="field__wrap"><input class="field__input" type="text" name="name" placeholder="Name" />
                        <div class="field__icon"><svg class="icon icon-profile">
                            <use xlink:href="img/sprite.svg#icon-profile"></use>
                          </svg></div>
                      </div>
                    </div>
                    <div class="contacts__field field">
                      <div class="field__wrap"><input class="field__input" type="email" name="email" placeholder="Email" />
                        <div class="field__icon"><svg class="icon icon-send">
                            <use xlink:href="img/sprite.svg#icon-send"></use>
                          </svg></div>
                      </div>
                    </div>
                    <div class="contacts__field field">
                      <div class="field__wrap"><select class="field__select" name="question">
                          <option>What are you working on?</option>
                          <option>What are you working on? 2</option>
                        </select>
                        <div class="field__icon"><svg class="icon icon-arrows">
                            <use xlink:href="img/sprite.svg#icon-arrows"></use>
                          </svg></div>
                      </div>
                    </div>
                    <div class="contacts__field field field_textarea">
                      <div class="field__wrap"><textarea class="field__textarea" name="message" placeholder="Message"></textarea>
                        <div class="field__icon"><svg class="icon icon-message">
                            <use xlink:href="img/sprite.svg#icon-message"></use>
                          </svg></div>
                      </div>
                    </div>
                    <div class="contacts__btn"><button class="btn btn_purple"><span class="btn__text">Let’s Talk</span><svg class="icon icon-arrow-right">
                          <use xlink:href="img/sprite.svg#icon-arrow-right"></use>
                        </svg></button></div>
                  </form>
                </div>
                <div class="contacts__category h5">Let’s connect</div>
                <div class="contacts__social">
                  <div class="contacts__box" data-aos="animation-translate-y"><a class="contacts__link" href="#"><svg class="icon icon-instagram">
                        <use xlink:href="img/sprite.svg#icon-instagram"></use>
                      </svg>
                      <div class="contacts__text">Instagram</div>
                    </a></div>
                  <div class="contacts__box" data-aos="animation-translate-y" data-aos-delay="150"><a class="contacts__link" href="#"><svg class="icon icon-instagram">
                        <use xlink:href="img/sprite.svg#icon-instagram"></use>
                      </svg>
                      <div class="contacts__text">Instagram</div>
                    </a></div>
                  <div class="contacts__box" data-aos="animation-translate-y" data-aos-delay="300"><a class="contacts__link" href="#"><svg class="icon icon-instagram">
                        <use xlink:href="img/sprite.svg#icon-instagram"></use>
                      </svg>
                      <div class="contacts__text">Instagram</div>
                    </a></div>
                  <div class="contacts__box" data-aos="animation-translate-y" data-aos-delay="450"><a class="contacts__link" href="#"><svg class="icon icon-instagram">
                        <use xlink:href="img/sprite.svg#icon-instagram"></use>
                      </svg>
                      <div class="contacts__text">Instagram</div>
                    </a></div>
                </div>
                <div class="figures">
                  <div class="figures__preview"><img class="figures__pic" src="img/figures-1.png" alt="" /></div>
                  <div class="figures__preview"><img class="figures__pic js-parallax" data-scale="1.6" data-orientation="up" src="img/figures-2.png" alt="" /></div>
                  <div class="figures__preview"><img class="figures__pic js-parallax" data-scale="1.3" data-orientation="up" src="img/figures-3.png" alt="" /></div>
                  <div class="figures__preview"><img class="figures__pic" src="img/figures-4.png" alt="" /></div>
                  <div class="figures__preview"><img class="figures__pic js-parallax" data-scale="2.3" data-orientation="down" src="img/figures-5.png" alt="" /></div>
                  <div class="figures__preview"><img class="figures__pic js-parallax" data-scale="2" data-orientation="up" src="img/figures-6.png" alt="" /></div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="footer__center center">
              <div class="footer__body"><a class="footer__logo" href="index.html"><img class="footer__pic" src="img/logo-empty.svg" alt="" /></a>
                <div class="footer__wrap">
                  <div class="footer__title h1">You only have one chance to make a first impression.</div>
                  <div class="footer__info h4">Let’s make it an amazing one.</div>
                </div>
                <div class="footer__menu"><a class="footer__link" href="#">About Me</a><a class="footer__link" href="#">Projects</a><a class="footer__link" href="#">Contact</a><a class="footer__link" href="#">Dribbble</a><a class="footer__link" href="#">Instagram</a></div>
              </div>
              <div class="footer__bottom">
                <div class="footer__copyright">© 2020, UI8 LLC.</div><a class="footer__scroll js-scroll" href="#header">Back to top</a>
              </div>
            </div>
            <div class="footer__bg">
              <div class="footer__preview"><img class="footer__pic js-parallax" data-scale="1.5" data-orientation="down" src="img/footer-cube-1.png" alt="" /></div>
              <div class="footer__preview"><img class="footer__pic js-parallax" data-scale="1.8" data-orientation="up" src="img/footer-cube-1.png" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="cursor"></div>
    </div>
    <script src="js/app.js"></script>
    <script src="js/common.js"></script>
  </body>
</html>
